<template>
  <view>
    <button @click="test">生成</button>
    <button @click="saveImage">保存</button>
    <lime-painter @success="path = $event" :board="base" ref="painter" width="750rpx" height="1284rpx" />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        base: {
          width: '750rpx',
          height: '1284rpx',
          views: [{
              type: 'image',
              src: '/static/bg1.png',
              css: {
                left: '0rpx',
                top: '0rpx',
                width: '750rpx',
                height: '1284rpx'
              }
            }, {
              type: 'image',
              src: '/static/9.jpg',
              css: {
                left: '122rpx',
                top: '264rpx',
                width: '506rpx',
                height: '506rpx'
              }
            }, {
              type: 'image',
              src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3870964477,3746012709&fm=26&gp=0.jpg',
              css: {
                left: '76rpx',
                top: '894rpx',
                width: '100rpx',
                height: '100rpx'
              }
            },
            {
              type: 'text',
              text: '林小帅男神',
              // 可以指定关键字颜色
              rules: {
                word: ['到地'],
                color: 'red'
              },
              css: {
                left: '204rpx',
                top: '896rpx',
                fontSize: '34rpx',
                lineHeight: '46rpx',
              }
            },
            {
              type: 'text',
              text: '邀请你来 “橙家云吉” ',
              // 可以指定关键字颜色
              rules: {
                word: ['到地'],
                color: 'red'
              },
              css: {
                left: '204rpx',
                top: '950rpx',
                fontSize: '26rpx',
                lineHeight: '36rpx',
              }
            },
          ]
        },
        path: '',
      }
    },
    methods: {
      test() {
        this.onRender()
        this.canvasToTempFilePath()
        // this.saveImage()
      },
      onRender() {
        // 支持通过调用render传入参数
        const painter = this.$refs.painter
        painter.render(this.base)
      },
      canvasToTempFilePath() {
        const painter = this.$refs.painter
        // 支持通过调用canvasToTempFilePath方法传入参数 调取生成图片
        painter.canvasToTempFilePath().then(res => this.path = res.tempFilePath)
      },

      saveImage() {
        this.isShowPopup = false
        console.log(this.path)
        uni.saveImageToPhotosAlbum({
          filePath: this.path,
          success(res) {
            uni.showToast({
              title: '已保存到相册',
              icon: 'success',
              duration: 2000
            })
          }
        })
      },
    }
  }
</script>
